<template>
  <transition
    appear
    enter-active-class="animated slideInRight"
    leave-active-class="animated slideOutRight"
  >
    <div class="mv-detail">
      <div class="video-container">
        <div class="back" @click="routerBack">
          <i class="iconfont iconfanhui"></i>
        </div>
        <div class="video-main">
          <video :src="currentPath" type="video/mp4" controls />
        </div>
      </div>
      <div class="scroll-wrapper-pos" ref="scrollwrapper">
        <scroll class="video-detail-wrap" :data="relateMv" ref="videodet">
          <div>
            <div class="video-info w700">
              <div class="video-tit">{{mvinfo.name}}</div>
              <div class="play-count">{{mvinfo.playCount |playNumFormat}}次观看</div>
            </div>
            <tool-bar :commentCount="mvinfo.commentCount" :shareCount="mvinfo.shareCount"></tool-bar>
            <div class="video-control-icons"></div>

            <div class="split"></div>
            <!-- 相关推荐 -->
            <div class="related-recommend w700">
              <div class="mv-section-tit">相关推荐</div>
              <mv-list :relateMvList="relateMv" v-on:clickedItem="handleMvItemClick"></mv-list>
            </div>
            <div class="split"></div>
            <comments v-show="hotComments.length" title="精彩评论" :comments="hotComments" class="pd10"></comments>
            <comments
              v-show="comments.length"
              title="最新评论"
              :total="total"
              :comments="comments"
              class="pd23"
            ></comments>
          </div>
        </scroll>
      </div>
      <sendcomment
        :id="mvinfo.id"
        :commenttype="2"
        :t="1"
        @updateComment="updateco"
        ref="sendComent"
        :isBottom="sendBottom"
      ></sendcomment>
    </div>
  </transition>
</template>

<script>
import {
  getMvDetail,
  getMvSrc,
  getRelatedMv,
  getMvComment
} from "@/request/api";
import ToolBar from "@/base/tool-bar/tool-bar";
import MvList from "@/components/mv/mv-list/mv-list";
import Scroll from "@/base/scroll/scroll";
import comments from "./mv-comment";
import { playListMixin } from "@/common/mixin.js";
import sendcomment from "@/base/comments/sendcomment";
export default {
  mixins: [playListMixin],
  data() {
    return {
      player: null,
      currentPath: "",
      mvinfo: {},
      relateMv: [],
      total: 0,
      hotComments: [],
      comments: [],
      sendBottom: false
    };
  },
  activated() {
    this.getAllData();
  },
  created() {
    this.getAllData();
  },
  mounted() {},
  methods: {
    handlePlayList(playlist) {
      if (playlist.length > 0) {
        this.$refs.scrollwrapper.style.bottom = "95px";
        this.sendBottom = true;
      } else {
        this.sendBottom = false;
        this.$refs.scrollwrapper.style.bottom = "";
      }
      this.$refs.videodet.refresh();
    },
    getAllData() {
      this.getMvDetail();
      this.getMvSrc();
      this.getRelatedmv();
      this.getMvcomment();
    },
    // 获取视频详情：
    async getMvDetail() {
      const res = await getMvDetail(this.$route.query.id);
      // const { avatarUrl, nickname } = res.data.creator;
      console.log(res);
      this.mvinfo = res.data;
      console.log(this.mvinfo);
      // console.log(avatarUrl);
    },
    async getMvSrc() {
      const res = await getMvSrc(this.$route.query.id);
      this.currentPath = res.data.url;
    },
    // 获取相关mv
    async getRelatedmv() {
      const res = await getRelatedMv(this.$route.query.id);
      this.relateMv = res.data;
      console.log(this.relateMv);
    },

    //获取mv评论
    async getMvcomment() {
      const res = await getMvComment(this.$route.query.id);
      this.total = res.total;
      this.hotComments = res.hotComments;
      this.comments = res.comments;
      console.log("获取mv评论");
    },
    routerBack() {
      this.$router.go(-1);
    },
    // 监听孙组件的id
    handleMvItemClick(vid) {
      console.log(vid);
    },
    updateco() {
      this.getMvcomment();
    }
  },
  components: {
    ToolBar,
    MvList,
    Scroll,
    comments,
    sendcomment
  }
};
</script>

<style lang="less" scoped>
.scroll-wrapper-pos {
  position: fixed;
  left: 0;
  top: 5.5333rem;
  width: 100%;
  bottom: 45px;
  z-index: 6666;
}
.video-detail-wrap {
  height: 100%;
  overflow: hidden;
  // padding-bottom: 45px;
}
.mv-detail {
  position: absolute;
  width: 100%;
  z-index: 666;
  left: 0;
  top: 0;
  background-color: #222;
}
.video-container {
  height: 5.5333rem;
  width: 100%;
  position: -webkit-sticky;
  position: relative;
  left: 0;
  top: 0;
  .back {
    position: absolute;
    left: 0.3333rem;
    top: 10px;
    z-index: 88;
    i {
      font-size: 0.48rem;
      color: @mc;
    }
  }
  .video-main {
    .posfull;
    video {
      .posfull;
    }
  }
}
.video-info {
  padding-top: 18px;
  .video-tit {
    font-size: 18px;
    line-height: 1.4;
  }
  .play-count {
    font-size: 14px;
    color: #999;
    margin-top: 14px;
  }
}
.split {
  width: 100%;
  height: 4px;
  background-color: #999;
  margin: 16px 0;
}
.mv-section-tit {
  font-size: 16px;
  padding: 14px 0;
}
.comment-box {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #333;
  height: 45px;
  .flex-row-nowrap;

  z-index: 777777;
  input {
    border: none;
    flex: 1;
    font-size: 14px;
    height: 45px;
    padding-left: 18px;
    color: #fff;
    background: #333;
  }
  span {
    font-size: 14px;
    padding: 0 10px;
  }
}
</style>